<template>
	<view class="topBar">
		<view @click="showSettings()" class="setting">
			<i><image style="width: 46rpx;height: 46rpx;" src="../../static/icons/Iconly-Light-Setting@2x.png"></image></i>
			<popup-panel @closePanel="closeSettings()" :bgCorlor="'#50858B'" :isShow="isShowSettings"></popup-panel>
		</view>
		<view class="user-name"><span>侯卉珊鹭</span></view>
		<view class="opera-area">
			<i><image style="width: 46rpx;height: 46rpx;" src="../../static/icons/Iconly-Light-Message@2x.png"></image></i>
		</view>
	</view>
</template>

<script>
import popupPanel from '../../pages/mine/components/popup-panel.vue';
export default {
	name: 'topBar2',
	components: {
		popupPanel
	},
	data() {
		return {
			isShowSettings: false
		};
	},
	methods: {
		showSettings() {
			// 打开抽屉
			this.isShowSettings = true;  
		},
		closeSettings(){
			console.log("我点击了关闭窗口");
			// 打开抽屉
			this.isShowSettings = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.topBar {
	/* #ifdef APP-PLUS */
	margin: 100rpx 0;
	/* #endif */
	/* #ifdef MP-WEIXIN */
	margin-top: 180rpx;
	/* #endif */
	display: flex;
	// align-items: center;
	justify-content: space-between;
	flex-direction: row;
	.user-name {
		font-size: 15px;
		color: $-color-theme-3;
		font-weight: bold;
		letter-spacing: 5rpx;
	}
}
</style>
